<template>
    <div class="carousel-wrap flex">
        <div
            v-if="showArrow"
            class="arrow left-arrow"
            @click="handleLeftClick"
        >
        </div>
        <div
            class="list-wrap"
            :style="{width: `${wrapWidth}px`}"
            @mouseenter="handleFn"
            @mouseleave="handleFn"
        >
            <div class="flex" :style="`transform: translateX(-${moveX}px)`">
                <slot
                    v-for="item in list"
                    name="content"
                    :data="item"
                >
                </slot>
            </div>
        </div>
        <div
            v-if="showArrow"
            class="arrow right-arrow"
            @click="handleRightClick"
        >
        </div>
    </div>
</template>
<script>
/**
 * @file pc group carousel with arrow
 */
export default {
    name: 'PcGroupCarousel',
    props: {
        list: {
            type: Array,
            default: () => []
        },
        interval: {
            type: Number,
            default: 300
        },
        max: {
            type: Number,
            default: 4
        },
        itemWidth: {
            type: Number,
            default: 300
        },
        itemRight: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            timer: null,
            moveX: 0
        }
    },
    computed: {
        showArrow() {
            if (this.list.length > this.max) {
                return true
            } else {
                return false
            }
        },
        wrapWidth() {
            return this.max * (this.itemWidth + this.itemRight) - this.itemRight
        },
        maxMoveX() {
            const len = this.list.length
            return len * (this.itemWidth + this.itemRight) - this.itemWidth
        }
    },
    watch: {
        moveX(nVal) {
            if (nVal >= this.maxMoveX) {
                this.moveX = 0
            }
        }
    },
    mounted() {
        if (this.list.length <= this.max) {
            return
        }
        this.play()
    },
    beforeDestroy() {
        this.stop()
        this.timer = null
    },
    methods: {
        play() {
            this.timer = setInterval(() => {
                this.moveX += this.wrapWidth
            }, this.interval)
        },
        stop() {
            clearInterval(this.timer)
        },
        handleLeftClick() {
            if (this.moveX === 0) {
                this.moveX = this.maxMoveX - this.wrapWidth
            } else {
                this.moveX -= this.wrapWidth
            }
        },
        handleRightClick() {
            this.moveX += this.wrapWidth
        },
        handleFn(e) {
            if (this.list.length <= this.max) {
                return
            }
            if (e.type === 'mouseenter') {
                this.stop()
            } else {
                this.play()
            }
        }
    },
}
</script>

<style lang="less" scoped>
.flex {
    display: flex;
}
.carousel-wrap {
    user-select: none;
    height: 100%;
    align-items: center;

    .list-wrap {
        overflow: hidden;
        margin: 0 48px;
        box-shadow: 0 4px 16px #bcbcbc;

        .flex {
            transition: all ease-in-out 1s;
        }
    }

    .arrow {
        width: 64px;
        height: 64px;
        cursor: pointer;
    }

    .arrow::after {
        border-top: 4px solid #999;
        width: 15px;
        height: 15px;
        content: '';
        display: inline-block;
        margin-top: 20px;
    }

    .left-arrow::after {
        border-left: 4px solid #999;
        transform: rotate(-45deg);
        margin-left: 25px;
    }

    .right-arrow::after {
        border-right: 4px solid #999;
        transform: rotate(45deg);
        margin-left: 27px;
    }
}
</style>
